<template>
  <div class="order-manage-container">
    <div class="order-summary">
      <a-row :gutter="16">
        <a-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
          <a-card class="summary-card" :bordered="false">
            <div class="summary-value">{{stats.total || 0}}</div>
            <div class="summary-title">总订单数</div>
          </a-card>
        </a-col>
        <a-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
          <a-card class="summary-card pending" :bordered="false">
            <div class="summary-value">{{stats.booked || 0}}</div>
            <div class="summary-title">已下单</div>
          </a-card>
        </a-col>
        <a-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
          <a-card class="summary-card checkin" :bordered="false">
            <div class="summary-value">{{stats.checked_in || 0}}</div>
            <div class="summary-title">入住中</div>
          </a-card>
        </a-col>
        <a-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
          <a-card class="summary-card completed" :bordered="false">
            <div class="summary-value">{{stats.confirmed || 0}}</div>
            <div class="summary-title">已完成</div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  
    <a-card class="search-card" :bordered="false">
      <div class="header-actions">
        <a-row type="flex" align="middle" :gutter="[16, 16]">
          <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="4">
            <a-input-search 
              v-model:value="searchKeyword" 
              placeholder="订单号" 
              @search="handleSearch" 
              allow-clear
              class="search-input"
              size="middle"
            />
          </a-col>
          <a-col :xs="24" :sm="10" :md="5" :lg="4" :xl="4">
            <a-select 
              v-model:value="statusFilter" 
              placeholder="订单状态" 
              @change="handleSearch"
              allow-clear
              class="status-select"
              size="middle"
            >
              <a-select-option value="booked">已下单</a-select-option>
              <a-select-option value="checked_in">已入住</a-select-option>
              <a-select-option value="confirmed">已完成</a-select-option>
              <a-select-option value="cancelled">已取消</a-select-option>
            </a-select>
          </a-col>
          <a-col :xs="24" :sm="14" :md="8" :lg="8" :xl="6">
            <a-range-picker 
              v-model:value="dateRange" 
              format="YYYY-MM-DD" 
              @change="handleSearch"
              :placeholder="['起始日期', '结束日期']"
              class="date-range"
              size="middle"
            />
          </a-col>
          <a-col :xs="24" :sm="24" :md="5" :lg="6" :xl="10" class="action-col">
            <a-space :size="12">
              <a-button type="primary" @click="loadData" class="action-btn" size="middle">
                <template #icon><reload-outlined /></template>
                刷新
              </a-button>
              <a-tooltip title="查看订单统计图表">
                <a-button type="primary" @click="goToStatistics" class="statistics-btn" size="middle">
                  <template #icon><bar-chart-outlined /></template>
                  数据统计
                </a-button>
              </a-tooltip>
              <a-tooltip title="导出所有订单到Excel">
                <a-button @click="exportOrders" :loading="exporting" class="export-btn" size="middle">
                  <template #icon><export-outlined /></template>
                  导出订单
                </a-button>
              </a-tooltip>
            </a-space>
          </a-col>
        </a-row>
      </div>
    </a-card>
    
    <a-card :bordered="false" class="table-card" :bodyStyle="{ padding: '0 24px 24px' }">
      <a-spin :spinning="loading">
        <div class="table-header">
          <h2 class="table-title">订单列表</h2>
          <div class="table-info">
            <a-tag color="blue">总计: {{pagination.total}} 条记录</a-tag>
          </div>
        </div>
        <a-table 
          :columns="columns" 
          :data-source="orderData" 
          row-key="id"
          :pagination="pagination"
          :loading="loading"
          @change="handleTableChange"
          class="custom-table"
          :rowClassName="() => 'table-row'"
          :scroll="{ x: 1000 }"
          @row-click="(record: OrderData) => showDetail(record)"
          size="middle"
          :bordered="false"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-tag :color="getStatusColor(record.status)" class="status-tag">{{ getStatusText(record.status) }}</a-tag>
            </template>
            
            <template v-if="column.key === 'action'">
              <a-space :size="8">
                <a-button 
                  type="primary" 
                  size="small" 
                  @click="(e: Event) => { e.stopPropagation(); showDetail(record); }" 
                  class="detail-btn"
                >
                  <template #icon><eye-outlined /></template>
                  详情
                </a-button>
                <a-dropdown 
                  v-if="['booked', 'checked_in'].includes(record.status)"
                  :trigger="['click']" 
                  @click="(e: Event) => e.stopPropagation()"
                >
                  <template #overlay>
                    <a-menu @click="(e: MenuInfo) => handleMenuClick(e, record)">
                      <a-menu-item :disabled="record.status === 'booked'" key="booked">已下单</a-menu-item>
                      <a-menu-item :disabled="record.status === 'checked_in'" key="checked_in">已入住</a-menu-item>
                      <a-menu-item :disabled="record.status === 'confirmed'" key="confirmed">已完成</a-menu-item>
                      <a-menu-item :disabled="record.status === 'cancelled'" key="cancelled">已取消</a-menu-item>
                    </a-menu>
                  </template>
                  <a-button size="small" class="status-btn">
                    修改状态 <down-outlined />
                  </a-button>
                </a-dropdown>
              </a-space>
            </template>
          </template>
          <template #emptyText>
            <div class="empty-data">
              <inbox-outlined style="font-size: 48px; color: #d9d9d9" />
              <p>暂无订单数据</p>
            </div>
          </template>
        </a-table>
      </a-spin>
    </a-card>

    <a-modal 
      v-model:open="showModal" 
      title="订单详情" 
      width="800px"
      @cancel="showModal = false" 
      :footer="null"
      class="order-modal"
      :maskClosable="true"
      :bodyStyle="{ padding: '12px 24px' }"
      destroyOnClose
    >
      <template #title>
        <div class="modal-title">
          <span>订单详情</span>
          <span class="modal-order-id">订单号: {{ current?.id }}</span>
        </div>
      </template>
      
      <div v-if="current" class="order-detail">
        <a-row :gutter="[0, 24]">
          <a-col :span="24">
            <a-descriptions :column="{ xs: 1, sm: 2, md: 3 }" bordered size="small" class="custom-descriptions">
              <a-descriptions-item label="客户姓名">{{ current.customer }}</a-descriptions-item>
              <a-descriptions-item label="联系电话">{{ current.phone || '未提供' }}</a-descriptions-item>
              <a-descriptions-item label="订单状态">
                <a-tag :color="getStatusColor(current.status)" class="status-tag">{{ getStatusText(current.status) }}</a-tag>
              </a-descriptions-item>
              <a-descriptions-item label="房间类型">{{ current.roomType }}</a-descriptions-item>
              <a-descriptions-item label="房间号">{{ formatRoomNumber(current.room) }}</a-descriptions-item>
              <a-descriptions-item label="入住人数">{{ current.guestCount || 1 }}</a-descriptions-item>
              <a-descriptions-item label="入住日期">{{ current.checkIn }}</a-descriptions-item>
              <a-descriptions-item label="离店日期">{{ current.checkOut }}</a-descriptions-item>
              <a-descriptions-item label="总价">
                <span class="price-text">¥{{ current.totalPrice }}</span>
              </a-descriptions-item>
              <a-descriptions-item label="支付状态">
                <a-tag :color="current.payStatus ? 'green' : 'orange'" class="status-tag">
                  {{ current.payStatus ? '已支付' : '未支付' }}
                </a-tag>
              </a-descriptions-item>
              <a-descriptions-item label="创建时间">{{ current.createTime }}</a-descriptions-item>
              <a-descriptions-item label="更新时间">{{ current.updateTime }}</a-descriptions-item>
            </a-descriptions>
          </a-col>
          
          <a-col :span="24">
            <div class="detail-actions">
              <a-space :wrap="true" :size="[12, 12]">
                <a-button type="primary" shape="round" @click="updateOrderStatus(current, 'checked_in')" 
                  :disabled="current.status !== 'booked' || !current.payStatus">办理入住</a-button>
                <a-button type="primary" shape="round" @click="updateOrderStatus(current, 'confirmed')" 
                  :disabled="current.status !== 'checked_in'">办理退房</a-button>
                <a-button danger shape="round" @click="updateOrderStatus(current, 'cancelled')" 
                  :disabled="['confirmed', 'cancelled'].includes(current.status) || current.payStatus">取消订单</a-button>
              </a-space>
            </div>
          </a-col>
          
          <a-col :span="24" v-if="current.travelers && current.travelers.length > 0">
            <div class="travelers-section">
              <h3 class="section-title">入住人信息</h3>
              <a-table :columns="travelerColumns" :data-source="current.travelers" :pagination="false" size="small" class="custom-table">
              </a-table>
            </div>
          </a-col>
          
          <a-col :span="24" v-if="current.remarks">
            <div class="remarks-section">
              <h3 class="section-title">备注信息</h3>
              <p>{{ current.remarks }}</p>
            </div>
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import { message } from 'ant-design-vue';
import { ExportOutlined, ReloadOutlined, InboxOutlined, EyeOutlined, DownOutlined, BarChartOutlined } from '@ant-design/icons-vue';
import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';
import dayjs from 'dayjs';
import { useRouter } from 'vue-router';
import { 
  apiGetHotelBookings, 
  apiSearchHotelBookings, 
  apiGetBookingDetailForAdmin, 
  apiUpdateBookingStatus,
  apiGetBookingStats 
} from '@/api/admin-api';
import { useHotelStore } from '@/stores/hotelStrore';
const hotelStore = useHotelStore();
const router = useRouter();

// 跳转到订单统计页面
function goToStatistics() {
  router.push('/admin/order-statistics');
}

interface OrderData {
  id: string | number;
  orderNo?: string;
  customer: string;
  phone?: string;
  room: string;
  roomType: string;
  checkIn?: string;
  checkOut?: string;
  guestCount?: number;
  status: string;
  totalPrice?: number;
  payStatus?: boolean;
  createTime?: string;
  updateTime?: string;
  travelers?: Traveler[];
  remarks?: string;
}

interface Traveler {
  id: string | number;
  name: string;
  idCard: string;
}

// 状态
const showModal = ref(false);
const current = ref<OrderData | null>(null);
const loading = ref(false);
const exporting = ref(false);
const searchKeyword = ref('');
const statusFilter = ref<string | undefined>(undefined);
const dateRange = ref<any[]>([]);
const orderData = ref<OrderData[]>([]);
const stats = reactive({
  total: 0,
  booked: 0,
  checked_in: 0,
  confirmed: 0,
  cancelled: 0
});

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 5,
  total: 0,
  showSizeChanger: true,
  showTotal: (total: number) => `共 ${total} 条`
});

// 获取酒店ID（实际应用中可能从store或路由参数获取）
// const hotelId = hotelStore.safeHotelId; // 示例酒店ID - 删除这个常量

const columns = [
  { title: '订单号', dataIndex: 'orderNo', key: 'orderNo' },
  { title: '客户', dataIndex: 'customer', key: 'customer' },
  { title: '房型', dataIndex: 'roomType', key: 'roomType' },
  { 
    title: '房间号', 
    dataIndex: 'room', 
    key: 'room',
    customRender: ({ text }: { text: any }) => formatRoomNumber(text)
  },
  { title: '入住日期', dataIndex: 'checkIn', key: 'checkIn', sorter: true },
  { title: '离店日期', dataIndex: 'checkOut', key: 'checkOut' },
  { title: '总价', dataIndex: 'totalPrice', key: 'totalPrice', 
    customRender: ({ text }: { text: number }) => `¥${text}` },
  { title: '状态', dataIndex: 'status', key: 'status', 
    filters: [
      { text: '已下单', value: 'booked' },
      { text: '已入住', value: 'checked_in' },
      { text: '已完成', value: 'confirmed' },
      { text: '已取消', value: 'cancelled' },
    ] 
  },
  { title: '操作', key: 'action' }
];

const travelerColumns = [
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '身份证号', dataIndex: 'idCard', key: 'idCard' }
];

// 加载订单数据
function loadData() {
  loading.value = true;
  
  // 获取最新的酒店ID
  const hotelId = hotelStore.safeHotelId;
  if (!hotelId) {
    message.warning('未获取到酒店ID，请先设置酒店信息');
    loading.value = false;
    return;
  }
  
  // 构建请求参数
  const params: any = {
    page: pagination.current,
    pageSize: pagination.pageSize
  };
  
  if (searchKeyword.value) {
    params.keyword = searchKeyword.value;
  }
  
  if (statusFilter.value) {
    params.status = statusFilter.value;
  }
  
  if (dateRange.value && dateRange.value.length === 2) {
    params.startDate = dateRange.value[0]?.format('YYYY-MM-DD');
    params.endDate = dateRange.value[1]?.format('YYYY-MM-DD');
  }
  
  // 添加调试日志
  console.log('请求参数:', params);
  console.log('当前分页状态:', pagination);
  
  // 调用API获取订单数据  
  apiSearchHotelBookings(hotelId, params)
    .then((res: any ) => {
      if (res && res.code === 200) {
        // 添加调试日志
        console.log('API响应:', res.data);
        
        // 处理返回的数据
        orderData.value = res.data.records?.map((record: any) => {
          // 如果后端返回的房间号需要特殊处理
          if (record.room && typeof record.room === 'string' && record.room.startsWith('[')) {
            try {
              record.room = formatRoomNumber(record.room);
            } catch (e) {
              console.error('格式化房间号失败:', e);
            }
          }
          return record;
        }) || [];
        
        pagination.total = res.data.total || 0;
      } else {
        message.error(res?.msg || '获取订单列表失败');
        // 如果出错，清空数据
        orderData.value = [];
        pagination.total = 0;
      }
    })
    .catch((error) => {
      console.error('获取订单列表失败:', error);
      message.error('获取订单列表失败');
      orderData.value = [];
      pagination.total = 0;
    })
    .finally(() => {
      loading.value = false;
    });
}

// 显示订单详情
function showDetail(record: OrderData) {
  loading.value = true;
  
  // 调用API获取详细信息
  apiGetBookingDetailForAdmin(record.id.toString())
    .then((res: any) => {
      if (res && res.code === 200) {
        current.value = res.data;
      } else {
        message.error(res?.msg || '获取订单详情失败');
        current.value = { ...record };
      }
    })
    .catch((error) => {
      console.error('获取订单详情失败:', error);
      message.error('获取订单详情失败');
      current.value = { ...record };
    })
    .finally(() => {
      loading.value = false;
      showModal.value = true;
    });
}

// 修改订单状态
function handleStatusChange(record: OrderData, val: string) {
  // 确认框
  if (val === 'cancelled' && record.status !== 'cancelled') {
    if (!confirm('确定要取消该订单吗？')) {
      // 恢复原来的状态
      record.status = current.value?.status || record.status;
      return;
    }
  }
  
  updateOrderStatus(record, val);
}

// 更新订单状态
function updateOrderStatus(record: OrderData, status: string) {
  const originalStatus = record.status;
  record.status = status;
  
  // 调用API更新订单状态
  message.loading({ content: '正在更新订单状态...', key: 'statusUpdate' });
  
  apiUpdateBookingStatus(record.id.toString(), status)
    .then((res: any) => {
      if (res && res.code === 200) {
        message.success({ content: '订单状态已更新', key: 'statusUpdate' });
        
        // 关闭详情弹窗
        if (showModal.value) {
          showModal.value = false;
        }
        
        // 重新加载数据
        loadData();
      } else {
        // 恢复原状态
        record.status = originalStatus;
          message.error({ content: res?.msg || '更新订单状态失败', key: 'statusUpdate' });
      }
    })
    .catch(() => {
      // 恢复原状态
      record.status = originalStatus;
      message.error({ content: '更新订单状态失败', key: 'statusUpdate' });
    });
}

// 格式化房间号显示
function formatRoomNumber(room: any): string {
  if (!room) return '未分配';
  
  // 如果是JSON字符串形式
  if (typeof room === 'string') {
    try {
      // 尝试解析JSON
      if (room.startsWith('[') && room.endsWith(']')) {
        const parsed = JSON.parse(room);
        if (Array.isArray(parsed)) {
          return parsed.join(', ');
        }
      }
      return room;
    } catch (e) {
      return room;
    }
  } 
  
  // 如果已经是数组
  if (Array.isArray(room)) {
    return room.join(', ');
  }
  
  return String(room);
}

// 处理表格变化（分页、排序、筛选）
function handleTableChange(paginationObj: any, filters: any, sorter: any) {
  console.log('表格变化:', paginationObj, filters, sorter);
  
  // 处理分页
  if (paginationObj) {
    // 修正这里的分页参数赋值
    pagination.current = paginationObj.current;
    pagination.pageSize = paginationObj.pageSize;
    
    // 添加调试信息
    console.log('分页变化后:', pagination);
  }
  
  // 处理筛选
  if (filters.status && filters.status.length > 0) {
    statusFilter.value = filters.status[0];
  } else {
    statusFilter.value = undefined;
  }
  
  // 重新加载数据
  loadData();
}

// 处理搜索
function handleSearch() {
  pagination.current = 1; // 重置到第一页
  loadData();
}

// 获取状态颜色
function getStatusColor(status: string): string {
  switch (status) {
    case 'booked':
      return 'blue';
    case 'checked_in':
      return 'green';
    case 'confirmed':
      return 'purple';
    case 'cancelled':
      return 'red';
    default:
      return 'default';
  }
}

// 状态翻译函数，将后端返回的英文状态转换为中文显示
function getStatusText(status: string): string {
  switch (status) {
    case 'booked':
      return '已下单';
    case 'checked_in':
      return '已入住';
    case 'confirmed':
      return '已完成';
    case 'cancelled':
      return '已取消';
    default:
      return status || '未知状态';
  }
}

// 导出订单
function exportOrders() {
  if (orderData.value.length === 0) {
    message.warning('没有可导出的订单数据');
    return;
  }
  
  exporting.value = true;
  
  try {
    // 准备导出数据
    const exportData = orderData.value.map(order => {
      return {
        '订单号': order.orderNo || order.id,
        '客户姓名': order.customer,
        '联系电话': order.phone || '',
        '房型': order.roomType,
        '房间号': order.room,
        '入住日期': order.checkIn || '',
        '离店日期': order.checkOut || '',
        '入住人数': order.guestCount || '',
        '总价(¥)': order.totalPrice || 0,
        '状态': order.status,
        '支付状态': order.payStatus ? '已支付' : '未支付',
        '创建时间': order.createTime || ''
      };
    });
    
    // 创建工作簿和工作表
    const wb = XLSX.utils.book_new();
    const ws = XLSX.utils.json_to_sheet(exportData);
    
    // 设置列宽
    const colWidths = [
      { wch: 15 }, // 订单号
      { wch: 10 }, // 客户姓名
      { wch: 15 }, // 联系电话
      { wch: 15 }, // 房型
      { wch: 10 }, // 房间号
      { wch: 12 }, // 入住日期
      { wch: 12 }, // 离店日期
      { wch: 10 }, // 入住人数
      { wch: 10 }, // 总价
      { wch: 10 }, // 状态
      { wch: 10 }, // 支付状态
      { wch: 20 }  // 创建时间
    ];
    ws['!cols'] = colWidths;
    
    // 添加工作表到工作簿
    XLSX.utils.book_append_sheet(wb, ws, '订单数据');
    
    // 生成Excel文件并下载
    const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
    const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
    
    // 生成文件名
    const now = dayjs();
    const fileName = `订单导出_${now.format('YYYYMMDD_HHmmss')}.xlsx`;
    
    setTimeout(() => {
      FileSaver.saveAs(blob, fileName);
      message.success('订单导出成功');
      exporting.value = false;
    }, 500);
  } catch (error) {
    console.error('导出Excel失败:', error);
    message.error('导出Excel失败');
    exporting.value = false;
  }
}

// 加载订单统计数据
function loadStats() {
  const hotelId = hotelStore.safeHotelId;
  if (!hotelId) return;
  
  apiGetBookingStats(hotelId)
    .then((res: any) => {
      if (res && res.code === 200) {
        const data = res.data || {};
        stats.total = data.total || 0;
        stats.booked = data.booked || 0; // 已下单
        stats.checked_in = data.checked_in || 0; // 已入住
        stats.confirmed = data.confirmed || 0; // 已完成（已退房）
        stats.cancelled = data.cancelled || 0; // 已取消
      }
    })
    .catch(error => {
      console.error('获取订单统计数据失败:', error);
    });
}

interface MenuInfo {
  key: string;
  keyPath: string[];
  item: any;
  domEvent: MouseEvent;
}

function handleMenuClick(e: MenuInfo, record: OrderData) {
  handleStatusChange(record, e.key);
}

onMounted(async () => {
  console.log("OrderManage组件挂载");
  
  try {
    // 确保先获取酒店信息
    if (!hotelStore.isInitialized || !hotelStore.safeHotelId) {
      console.log("等待获取酒店信息...");
      await hotelStore.getHotelInfo();
    }
    
    if (hotelStore.safeHotelId) {
      console.log("获取到酒店ID:", hotelStore.safeHotelId);
      loadData();
      loadStats(); // 加载订单统计数据
    } else {
      message.warning('未获取到酒店信息，请确保您有管理酒店的权限');
    }
  } catch (error) {
    console.error("获取酒店信息失败:", error);
    message.error('获取酒店信息失败');
  }
});

</script>

<style scoped>
.order-manage-container {
  padding: 24px;
  background-color: #f5f7f9;
  min-height: calc(100vh - 100px);
}

.order-summary {
  margin-bottom: 24px;
}

.summary-card {
  height: 100px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #fff;
  transition: all 0.3s;
}

.summary-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.summary-card.pending {
  background: linear-gradient(to right, #faad14, #ffc53d);
}

.summary-card.checkin {
  background: linear-gradient(to right, #52c41a, #73d13d);
}

.summary-card.completed {
  background: linear-gradient(to right, #1890ff, #36cfc9);
}

.summary-value {
  font-size: 28px;
  font-weight: bold;
  color: #1f2937;
  line-height: 1;
  margin-bottom: 8px;
}

.summary-title {
  font-size: 14px;
  color: #6b7280;
}

.pending .summary-value,
.pending .summary-title,
.checkin .summary-value,
.checkin .summary-title,
.completed .summary-value,
.completed .summary-title {
  color: #ffffff;
}

@media (max-width: 576px) {
  .action-btn, .export-btn {
    font-size: 12px;
    height: 28px;
    padding: 0 10px;
  }
  
  .summary-card {
    height: 80px;
    padding: 12px;
  }
  
  .summary-value {
    font-size: 20px;
  }
  
  .summary-title {
    font-size: 12px;
  }
  
  .modal-title {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .modal-order-id {
    margin-top: 4px;
  }
}

.search-card {
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
}

.table-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  overflow: hidden;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0;
}

.table-title {
  font-size: 18px;
  font-weight: 500;
  color: #1f2937;
  margin: 0;
  padding-left: 8px;
  border-left: 3px solid #1890ff;
}

.table-info {
  display: flex;
  gap: 8px;
}

.header-actions {
  width: 100%;
}

.search-input {
  width: 100%;
  border-radius: 6px;
}

.status-select {
  width: 100%;
  border-radius: 6px;
}

.date-range {
  width: 100%;
  border-radius: 6px;
}

.action-col {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .action-col {
    justify-content: flex-start;
    margin-top: 8px;
  }
  
  .order-manage-container {
    padding: 12px;
  }
}

.action-btn {
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.3s;
  padding: 0 16px;
  height: 32px;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}

.export-btn {
  border-radius: 6px;
  transition: all 0.3s;
  padding: 0 16px;
  height: 32px;
}

.export-btn:hover {
  transform: translateY(-2px);
}

.custom-table {
  margin-top: 8px;
}

.order-detail {
  padding: 0;
}

.detail-actions {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}

.remarks-section {
  margin-top: 8px;
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.travelers-section {
  margin-top: 8px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
  color: #1f2937;
  padding-left: 8px;
  border-left: 3px solid #1890ff;
}

.status-tag {
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 4px;
}

.price-text {
  font-weight: 500;
  color: #f5222d;
}

.empty-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
}

.empty-data p {
  color: #8c8c8c;
  margin-top: 8px;
}

.table-row {
  transition: all 0.3s;
}

.table-row:hover {
  background-color: #f0f7ff;
  cursor: pointer;
}

.modal-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.modal-order-id {
  font-size: 14px;
  color: #999;
  font-weight: normal;
}

:deep(.ant-descriptions-item-label) {
  width: 100px;
  background-color: #fafafa;
}

:deep(.ant-card-body) {
  padding: 20px 24px;
}

:deep(.ant-table-thead > tr > th) {
  background-color: #f5f7fa;
  font-weight: 500;
  padding: 12px 16px;
}

:deep(.ant-table-tbody > tr > td) {
  padding: 12px 16px;
}

:deep(.ant-pagination) {
  margin-top: 16px;
}

:deep(.ant-modal-content) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.ant-modal-header) {
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
}

:deep(.ant-modal-title) {
  font-weight: 500;
  font-size: 16px;
}

:deep(.custom-descriptions .ant-descriptions-item-container) {
  align-items: center;
}

.detail-btn {
  border-radius: 4px;
}

.status-btn {
  border-radius: 4px;
}

:deep(.ant-dropdown-menu) {
  border-radius: 6px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

:deep(.ant-dropdown-menu-item) {
  transition: all 0.2s;
}

:deep(.ant-dropdown-menu-item:hover:not(.ant-dropdown-menu-item-disabled)) {
  background-color: #e6f7ff;
}
</style> 